<template>
<div class="page-wrapper">
  <Breadcrumb v-bind="breads" />
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <form class="form-inline from-search" role="form" @submit.prevent="searchAdmins(1)">
              <div class="form-group">
                <label class="control-label">&nbsp;</label>
                <select id="search-platforms" multiple="multiple" class="selectpicker" title="-平台类型-" data-actions-box="true"
                  @change="setSearchPlatforms($event.target)">
                  <option v-for="(plat, index) in platforms" :key="index" :value="index">{{plat.text}}</option>
                </select>
              </div>
              <div class="form-group">
                <label class="control-label">用户名：</label>
                <div class="btn-group">
                  <input type="text" v-model="search.name" class="form-control" style="width:150px;">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">昵称：</label>
                <div class="btn-group">
                  <input type="text" v-model="search.nickname" class="form-control" style="width:150px;">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">姓名：</label>
                <div class="btn-group">
                  <input type="text" v-model="search.realName" class="form-control" style="width:150px;">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">手机号：</label>
                <div class="btn-group">
                  <input type="text" v-model="search.mobile" class="form-control" style="width:150px;">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">&nbsp;</label>
                <div class="btn-group">
                  <select id="search-sex" class="form-control selectpicker" title="-性别-" @change="setSearchSex($event.target)">
                    <option value="">-性别-</option>
                    <option v-for="(sex, index) in sexs" :key="index" :value="sex.name">{{sex.text}}</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="control-label">&nbsp;</label>
                <button type="submit" class="btn btn-primary">查 找</button>
              </div>
              <div class="form-group">
                <label class="control-label">&nbsp;</label>
                <div class="btn-group">
                  <button type="button" class="btn btn-primary" v-on:click="newAdmin()">新 增</button>
                </div>
              </div>
            </form>
          </div>
          <div class="col-12 table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>用户名</th>
                  <th>昵称</th>
                  <th>手机号</th>
                  <th>真实姓名</th>
                  <th>性别</th>
                  <th>登录时间</th>
                  <th>注册时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <AdminListItem v-for="(admin, index) in admins" v-bind="admin" :index="index" :key="admin.adminId" :platType="platType"
                  v-on:edit="editAdmin($event)" v-on:del="delAdmin($event)" />
              </tbody>
            </table>
            <div class="col-12">
              <PageLink v-bind="paging" v-on:go-page="searchAdmins($event)" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer />
  <AdminModal ref="adminModal" :platType="platType" v-on:admin="setAdmin($event)" />
</div>
</template>
<script>
  import $ from 'jquery'
  import cfg from '../dist/js/config'
  import Footer from './ComFooter'
  import Breadcrumb from './ComBreadcrumb'
  import PageLink from './ComPageLink'
  import AdminListItem from './AdminListItem'
  import AdminModal from './AdminEditModal'
  import { platforms, sexs } from '../dist/js/enum'

  const platform = -1

  // 查询条件
  const search = {}

  // 列表数据
  const admins = []

  // 分页信息
  const paging = {}

  // 添加/编辑对象
  const admin = {}

  function searchAdmins(nowPage) {
    if (nowPage) {
      this.search.nowPage = nowPage
    }
    const callback = result => {
      if (result.status != 0) {
        $(document).failMsg(result.message)
        return
      }
      Object.assign(this.paging, this.paging, result.data.paging)
      this.admins.splice(0, this.admins.length)
      if (!result.data.list) {
        return
      }
      for (let admin of result.data.list) {
        this.admins.push(admin) }
    }
    $.get(cfg.serverPath + '/admin/page/!/' + this.platType + '-list-admin', this.search, callback)
  }
  function newAdmin() {
    this.$refs.adminModal.setAdmin({
      platforms: 1 << this.platform
    })
    this.$refs.adminModal.open()
  }
  function editAdmin(index) {
    this.admin = this.admins[index]
    this.$refs.adminModal.setAdmin(this.admin)
    this.$refs.adminModal.open()
  }
  function delAdmin(index) {
    this.admin = this.admins[index]
    const success = result => {
      if (result.status != 0) {
        $(document).failMsg(result.message)
        return
      }
      $(document).infoMsg('删除成功')
      this.admins.splice(index, 1)
    }
    $.ajax({
      contentType: 'application/json; charset=UTF-8',
      url: cfg.serverPath + '/admin/del/!/' + this.platType + '-del-admin',
      type: 'delete',
      data: '' + this.admin.adminId,
      success
    })
  }
  function setAdmin(admin) {
    if (this.admin && this.admin.adminId == admin.adminId) {
      Object.assign(this.admin, this.admin, admin)
    } else {
      this.admins.unshift(admin)
    }
  }
  function setSearchPlatforms(el) {
    const plats = $(el).val()
    this.search.platforms = ''
    if (plats.length > 0) {
      this.search.platforms = 0
      for (let i in plats) {
        this.search.platforms |= (1 << parseInt(plats[i]))
      }
    }
  }
  function setSearchSex(el) {
    this.search.sex = $(el).val()
  }
  function breads() {
    return {
      title: this.platform ? this.platforms[this.platform].text + '-账号管理' : '账号管理',
      items: [
        {
          href: '#/',
          name: '主页'
        },
        {
          href: '',
          name: this.platform ? this.platforms[this.platform].text : ''
        },
        {
          href: '',
          name: '账号管理'
        }
      ]
    }
  }
  function reset() {
    for (let i in this.platforms) {
      if (this.platforms[i].name.toLowerCase().indexOf(this.platType) != -1) {
        this.platform = i
        break
      }
    }
    this.search = {
      name: '',
      sex: '',
      nowPage: 1,
      'sorts[0].field': 'adminId',
      'sorts[0].isDesc': true
    }
    this.admins = []
    this.paging = {}
    this.admin = {}
    this.searchAdmins()
  }
  function init() {
    $(function() {
      $('#search-platforms, #search-sex').selectpicker()
    })
    this.reset()
  }
  export default {
    props: {
      platType: String
    },
    components: {
      Breadcrumb,
      Footer,
      AdminListItem,
      PageLink,
      AdminModal
    },
    data() {
      return {
        platforms,
        platform,
        sexs,
        search,
        admin,
        admins,
        paging,
        setAdmin
      }
    },
    methods: {
      init,
      reset,
      searchAdmins,
      newAdmin,
      editAdmin,
      delAdmin,
      setSearchPlatforms,
      setSearchSex
    },
    computed: {
      breads,
    },
    created() {
      this.init()
    },
    watch: {
      platType() {
        this.reset()
      }
    }
  }
</script>